<template>
  <cml-module-item :title="titleText" :titleMore="titleMore" v-bind="$attrs" v-on="$listeners">
    <a-switch
      size="small"
      :disabled="!isReady"
      :loading="rloading"
      :checked="isStart"
      @change="change($event, true)"
    />
    <template v-slot:detail>
      <face-recognize-more></face-recognize-more>
    </template>
  </cml-module-item>
</template>
<script>
import { Switch } from 'ant-design-vue'
import CmlModuleItem from '../../cml-module-item'
import FaceRecognizeMore from './morePanel'
import * as anov from 'anov-core'
import aiMediaCheck from '../../../util/aiMediaCheck'

export default {
  name: 'FaceRecognize',
  inheritAttrs: false,
  components: {
    ASwitch: Switch,
    CmlModuleItem,
    FaceRecognizeMore
  },
  model: {},
  props: {},
  data() {
    return {
      rloading: false,
      isReady: true,
      byUser: false,
      isChecked: false,
      type: 'faceRecognize'
    }
  },
  computed: {
    ...anov.faceRecognizeServer.mapState(['isStart']),
    ...anov.envServer.mapState(['videoStatus']),
    titleText() {
      return this.$t('cmlpanel.face')
    },
    titleMore() {
      return this.$t('cmlpanel.face')
    }
  },
  watch: {
    isStart(v) {
      this.change(v)
    }
  },
  created() {
    // this.isReady = rfs.isReady
  },
  mounted() {
    //初始化状态
    this.change(this.isStart)

    anov.faceRecognizeServer.addEventListener('start', this.onReady.bind(this))
    anov.faceRecognizeServer.addEventListener('error', this.onError.bind(this))
    anov.faceRecognizeServer.addEventListener('stop', this.onStop.bind(this))
    anov.faceRecognizeServer.addEventListener('readyStart', () => {
      this.change(true, true)
    })
  },
  beforeDestroy() {},
  methods: {
    ...anov.envServer.mapMutations(['setVideoStatus']),
    change(isStart,byUser) {
      this.byUser = byUser === true?byUser:this.byUser
      if(isStart == this.isStart) {
        this.byUser = false
        return
      }
      // if (isStart == this.isStart) return
      let params = {
          type: this.type,
          msg: this.$t('cmlpanel.face'),
          //确认开启弹框确认按钮回调
          okCallback: () => {},
          //确认开启弹框取消按钮回调
          cancelCallback: () => {
            this.rloading = false
          },
          //正常开启回调
          startCallback: () => {
            this.startCallback()
          }

      }
      if (isStart) {
        // 判断开启确认弹框 或 无效弹框 或 正常开启
        aiMediaCheck.getVideoStatus({...params})
      } else {
        //关闭
        this.isChecked = false
        anov.faceRecognizeServer.stop()
        this.rloading = false
      }

    },
    //开启回调
    startCallback(){
      anov.faceRecognizeServer.start()
      this.rloading = false
      this.isReady = true
    },
    onReady() {
      setTimeout(()=>{
        this.rloading = false
        this.voiceBroadcast(true)
      },10)
    },
    onError() {
      //摄像头不可用
      aiMediaCheck.videoUnusable(this.$t('cmlspanel.face'))
    },
    onStop() {
      this.voiceBroadcast(false)
    },
    voiceBroadcast(isStart){
      let msg = this.titleText+(isStart?this.$t('cmlpanel.start'):this.$t('cmlpanel.stop'))
      anov.voiceFeedbackServer.speak(msg)

      app.msg({type: 'info', content: msg})
    }
  }
}
</script>
<style lang="scss" scoped>
</style>